<!-- 天气选择 -->
<template>
	<view class="tool-weather">
		<input class="tool-input" :value="value" type="text" disabled :placeholder="placeholder" @click="showBox" />
		<view class="weather-select" v-if="boxState" @click="hideBox">

			<view :class="'select-box'+(listState?' show':'')" @click.stop="">
				<view class="top_view">
					<view class="top_bg"></view>
					<text>请选择天气情况</text>
				</view>
				<template v-for="(items,index) in selectData">
					<view class="label" v-if="items.label">
						<text>{{items.label}}</text>
					</view>
					<view class="select-list">
						<view v-for="(item,i) in items.list" :key="i" class="select-item" @click="select(item)">
							<text>{{item}}</text>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['value', 'placeholder'],
		data() {
			return {
				boxState: false,
				listState: false,
				selectData: [{
						label: "",
						list: ['晴', '多云', '阴', '雾']
					},
					{
						label: "降雨天气",
						list: ['小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '阵雨', '雷阵雨', '雷阵雨伴有冰雹', '冰雨']
					},
					{
						label: "降雪天气",
						list: ['小雪', '中雪', '大雪', '阵雪', '暴雪', '雨夹雪']
					},
					{
						label: "其它",
						list: ['阵雪', '暴雪', '雨夹雪']
					}
				]
			};
		},
		methods: {
			hideBox() {
				this.boxState = false;
				this.listState = false;
			},
			showBox() {
				this.boxState = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.listState = true;
					}, 1)
				})
			},
			select(text) {
				this.$emit('change', text)
				this.$emit('input', text)
				this.hideBox()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tool-weather {


		.tool-input {
			height: inherit;
			line-height: inherit;
			font-size: inherit;
			min-height: 0;
		}

		.weather-select {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 99;



			.select-box {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
				padding: 10rpx 20rpx 10px;
				transform: translateY(100%);
				transition: all 0.4s;

				.top_view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 30rpx;
					

					.top_bg {
						width: 100rpx;
						height: 8rpx;
						background-color: $app-color;
						border-radius: 5rpx;
						
					}
					text{
						margin-top: 10rpx;
						font-size: 32rpx;
					}
				}

				.label {
					font-size: 30rpx;
					line-height: 3em;
					padding-left: 0.25em;
				}

				.select-list {
					.select-item {
						float: left;
						font-size: 30rpx;
						min-width: 3em;
						padding: 0 1em;
						text-align: center;
						line-height: 2.5em;
						border-radius: 0.5em;
						background-color: #eee;
						margin: 0 0.25em 0.6em;
						box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
					}

					&::after {
						content: "";
						clear: both;
						display: block;
						height: 0;
					}
				}

				&.show {
					transform: translateY(0);
				}
			}
		}
	}
</style>
